﻿<!DOCTYPE html>
<html>
<head>
    <title>jQuery MiniUI</title>

    <link rel="Stylesheet" href="css/jQueryminiUI.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/Button.js"></script>
    <script type="text/javascript" src="js/Select.js"></script>
    <script type="text/javascript" src="js/Radio.js"></script>

    <style>
        body, html { margin:0; padding: 0; background: rgb(251, 251, 251); font-family: Calibri ;}
        h1 { font-size: 40pt; margin:30px 30px 0 30px;  }
        h2 { font-size: 25pt; border-bottom:1px solid rgb(220, 220, 220); margin:30px 20px 0 20px;}
        h1, h2, h3 { color: rgb(50, 50, 50); }
        p { font-size:17pt; font-family: Calibri; margin: 10px 35px 0 35px;}
        div.center { width:700px; margin: 0 auto 0 auto; height:100%; background: white; padding: 10px;
            box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1); border-radius: 3px; border-top-left-radius:0; border-top-right-radius:0; border: 1px solid rgb(200, 200, 200); border-top: 0;}
    
      
        div.sample { border-radius: 3px; border:1px solid rgb(200, 200, 200); margin: 0px 35px 0px 35px; 
            padding: 0 10px 0 10px; font-size:17pt; }
        div.render { padding: 10px; }
        div.source { background:#FFFAFB; font-size:12pt; border-color: pink; }
        div.description { margin: 20px 45px 0px 45px; font-size:12pt; text-transform:uppercase;}
    </style>

</head>
<body>
    <div class="center">
		<h1>jQuery MiniUI</h1>
        <div>
            <h2>Description</h2>
            <p>jQuery MiniUI</p>
        </div>
        <div>
		    <h2>Button</h2>
            <p>Info siia</p>
            <div class="description">Sample:</div>
            <div class="sample render">
                <button id="sample_1">Button one</button> 
                <button id="sample_2">Button two</button></div>
            <div class="description">Source:</div>
            <div class="sample source">
<pre><code>&lt;button id="#sample_1"&gt;Button one&lt;/button&gt; 
&lt;button id="#sample_1"&gt;Button two&lt;/button&gt;

&lt;script type="text/javascript"&gt;
    $(function () {
        $('#sample_1').button();
        $('#sample_2').button();
    });
&lt;/script&gt;</code></pre>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#sample_1').button();
                    $('#sample_2').button();
                });
            </script>
        </div>
        <div>
            <h2>Select</h2>
            <p>Info siia</p>
            <div class="description">Sample:</div>
            <div class="sample render">
                <select id="sample_3">
                    <option value="0">Sample option 1</option>
                    <option value="1">Option 2</option>
                    <option value="2">Option 3</option>
                </select>
            </div>
            <div class="description">Source:</div>
            <div class="sample source">
<pre><code>&lt;select id="Select1"&gt;
    &lt;option value="0"&gt;Sample option 1&lt;/option&gt;
    &lt;option value="1"&gt;Option 2&lt;/option&gt;
    &lt;option value="2"&gt;Option 3&lt;/option&gt;
&lt;/select&gt;

&lt;script type="text/javascript"&gt;
    $(function () {
        $('#sample_1').button();
        $('#sample_2').button();
    });
&lt;/script&gt;</code></pre>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#sample_3').select();
                });
            </script>
        </div>
        <div>
            <h2>Radio</h2>
            <p>Info siia</p>
            <div class="description">Sample:</div>
            <div class="sample render">
                <div id="sample_4">
                    <label for="radio_1">Option 1</label><input type="radio" value="0" name="sample_4" id="radio_1">  
                    <label for="radio_2">Option 2</label><input type="radio" value="1" name="sample_4" id="radio_2">
                    <label for="radio_3">Option 3</label><input type="radio" value="2" name="sample_4" id="radio_3">
                </div>
            </div>
            <div class="description">Source:</div>
            <div class="sample source">
<pre><code>&lt;label for="radio_1"&gt;Option 1&lt;/label&gt;
   &lt;input type="radio" value="0" name="sample_4" id="radio1"&gt;  
&lt;label for="radio_2"&gt;Option 2&lt;/label&gt;
   &lt;input type="radio" value="1" name="sample_4" id="radio2"&gt;
&lt;label for="radio_3"&gt;Option 3&lt;/label&gt;
   &lt;input type="radio" value="2" name="sample_4" id="radio3"&gt;

&lt;script type="text/javascript"&gt;
    $(function () {
        $('#sample_4').radio();
    });
&lt;/script&gt;
</code></pre>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#sample_4').radio();
                });
            </script>
        </div>
	</div>
</body>
</html>
